<template>
  <el-dialog
    title="选择部门"
    :visible.sync="deptPanel"
    :close-on-click-modal="false"
    :show-close="false"
    width="700px"
  >
    <div class="user-panel">
      <div class="user-panel-left">
        <el-table
          :data="organization"
          row-key="id"
          default-expand-all
          :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
          @row-click="rowList"
        >
          <el-table-column
            prop="orgName"
            label="组织机构名称"
          ></el-table-column>
        </el-table>
      </div>
      <div class="user-panel-right">
        <div>
          <el-button type="danger" @click="remove" size="mini" plain
            >清空</el-button
          >
        </div>
        <el-tag
          v-for="(tag, index) in checked"
          :key="index"
          closable
          size="medium"
          effect="plain"
          @close="handleClose(tag)"
        >
          {{ tag.name }}
        </el-tag>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <span class="wrap-btn wrap-success" @click="save">确定</span>
      <span class="wrap-btn wrap-default" @click="close">取消</span>
    </div>
  </el-dialog>
</template>

<script>
import { arrayObjectDeduplication } from '@u/index'
export default {
  name: 'deptPanel',
  props: {
    deptPanel: {
      type: Boolean,
      default: () => {
        return false
      },
    },
    organization: {
      type: Array,
      default: () => {
        return []
      },
    },
    panelData: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  watch: {
    deptPanel(cur, old) {
      this.checked = this.panelData
    },
  },
  data() {
    return {
      visible: false,
      checked: [],
    }
  },
  methods: {
    rowList(row) {
      //获取选中节点数据
      this.checked.push({
        id: row.id,
        name: row.orgName,
      })
      this.checked = arrayObjectDeduplication(this.checked, 'id')
    },
    remove(row) {
      //清空
      if (this.checked.length == 0) return
      this.$confirm('您确定要清空用户吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.checked = []
          this.$message.success('操作成功！')
        })
        .catch(() => {})
    },
    handleClose(tag) {
      //删除用户
      this.checked.splice(this.checked.indexOf(tag), 1)
    },
    close() {
      this.$emit('close')
    },
    save() {
      //保存
      if (this.checked.length == 0) {
        this.$message.error('请选择部门！')
        return
      }
      this.$emit('save', this.checked)
    },
  },
}
</script>
<style lang="scss" scoped>
.user-panel {
  width: 100%;
  height: 300px;
  display: flex;
  > div {
    border: 1px solid #e4e7ed;
    height: 300px;
    overflow-y: scroll;
  }
  > div::-webkit-scrollbar {
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  > div::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #EBEEF5;
    background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
    );
  }
  > div::-webkit-scrollbar-track {
    border-radius: 5px;
  }
  &-left {
    width: 300px;
  }
  &-right {
    flex: 1;
    margin-left: 20px;
    > div {
      text-align: right;
      padding: 5px 0;
    }
    > span {
      margin: 5px;
    }
  }
}
</style>
